<template>
    <div>
        <h1>vue3语法</h1>
        <h2>{{ msg }}</h2>
        <h2>{{ num }}</h2>
        <input type="text" v-model="num" />
        <button @click="add">加法</button>
        <h2>{{ obj.name }}</h2>
        <input type="text" v-model="obj.name" />
        <button @click="showObj">展示对象</button>
        <h2>{{ arr }}</h2>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <div>{{ item }}</div>
            </li>
        </ul>
        <ul>
            <li v-for="(value, key, index) of obj" :key="index">
                <div>{{ value }}---{{ key }}---{{ index }}</div>
            </li>
        </ul>
        <hr />
        <h1>data当中的值</h1>
        <h2>{{ info }}</h2>
    </div>
</template>

<script lang="ts">
//vue3中使用响应式数据，要在import中引入 ref（基本数据类型）    reactive（引用数据类型）
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
    setup() {
        //   这种写法数据不是响应式
        /*  let msg = "学习vue3的第一天！";
        let num = 0;
        function add() {
            console.log(num);
        } */
        // 在数据外包一个ref
        let msg = ref("学习vue3的第一天！");
        4;
        let num = ref(0);
        function add() {
            // 当基本数据类型包上ref之后，变为一个响应式的数据，数据就变为一个ref对象，通过get和set变为响应式数据
            console.log(num);
            console.log(num.value);
            // 在ref对象当中，ts或者说是js当中操作数据获取具体的值 xx.value,在模板（template）当中获取不需要xx.vue,直接使用即可
            num.value += 1;
            //   this.num +=1;
            //   console.log(this);
            //   此处不能使用this,使用报错 
        }

        // 引用数据类型
        /*  let obj = ref({
            name: "tom",
            age: 20,
        }); */
        let obj = reactive({
            name: "tom",
            age: 10,
        });
        let arr = reactive([1, 2, 5]);
        // 使用ref包裹对象之后，该对象变为ref对象，是响应式数据，但是value值不是该对象是proxy代理对象
        //使用 reactive将对象变为响应式对象，直接它就是proxy
        function showObj() {
            console.log(obj);
            console.log(num);
        }
        return {
            msg,
            num,
            add,
            obj,
            showObj,
            arr,
        };
    },
    data() {
        return {
            info: "看看setup和data当中的值一样不",
        };
    },
});
</script>

<style scoped>

</style>